<template>
  <div class="app-contain">
    <el-card>
      <div class="search">
        <el-button class="newBtn" size="small" icon="el-icon-plus" @click="$emit('addRole')">新增角色</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableList"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" width="120" type="index" align="center" />
        <el-table-column label="人员名称" width="240" prop="userName" align="center" />
        <el-table-column label="归属地区" prop="regionName" align="center" />
        <el-table-column label="角色" prop="role.roleName" align="center" />
        <el-table-column label="联系电话" prop="mobile" align="center" />
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button style="border:0px" type="text">
              <span style="color:blue;margin-right:10px" @click="edit(scope.row.userName)">修改</span>
            </el-button>
            <el-button type="text" style="border:0px">
              <span style="color:red" @click="delRole(scope.row.id)">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="space-between" align="middle" class="block" style="margin-top:10px">
        <div class="page">
          <div class="page-total">
            <span>共{{ total }}条记录</span>
            <span>第{{ page.pageIndex }}/{{ totalPage }}页</span>
          </div>
        </div>
        <el-pagination
          v-if="total > 0"
          :current-page.sync="page.pageIndex"
          :page-size.sync="page.pageSize"
          background
          layout=" prev, next,slot"
          prev-text="上一页"
          next-text="下一页"
          :total="total"
          @current-change="getRoleList"
          @size-change="getRoleList"
        />
      </el-row>
    </el-card>
  </div>

</template>

<script>
export default {
  name: 'UserTable',
  props: {
    page: {
      type: Object,
      default: () => ({})
    },
    tableList: {
      type: Array,
      required: true
    },
    total: {
      type: [String, Number],
      default: 0
    },
    totalPage: {
      type: [String, Number],
      default: 0

    }
  },
  data() {
    return {
      // userList: [],
      loading: false,
      // page: {
      //   // 放置页码及相关数据
      //   pageIndex: 1,
      //   pageSize: 10
      // },
      // total: 0,
      // currentPage: 1,
      // totalPage: 0,
      dialogFormVisible: false,
      currentPageRecords: ''
    }
  },
  // created() {
  //   this.getRoleList()
  // },
  methods: {
    // 当页页数发生变化 触发
    getRoleList(pageIndex) {
      this.$emit('getRoleList', pageIndex)
    },
    // 删除用户
    async delRole(id) {
      this.$emit('del', id)
      // // 调用删除得接口
      // // 重新获取数据
      // await this.$confirm('是否删除该人员?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // })
      // await DelUserApi(id)
      // this.getRoleList()
    },
    // 修改用户
    async edit(name) {
      this.$emit('edit', name)

      this.dialogFormVisible = true
      // const { data } = await getUserSearchApi({ userName: name })
      // console.log(data)
      // this.$refs.addRole.form = data.currentPageRecords[0]
    },
    // 搜索
    searchUser(value) {
      this.userList = value
    }

  }
}
</script>

<style lang="scss">
.page {
  display: flex;
  justify-content: space-between;
  .page-total {
    span {
      color: #dbdfe5!important;
      font-size: 16px;
      margin-right: 10px;
      font-weight: normal;
    }
  }
}
.search {
margin-bottom: 15px ;
  .newBtn {
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    color: #fff;
  }
}
.el-pagination {
  display: flex;
  .btn-prev,.btn-next {
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
  }
}

</style>
